<template>
    <div :class="`${PREFIX}`">
        <img :class="`${PREFIX}-img`" :src="item.img" alt="">
        <div :class="`${PREFIX}-con`">
            <h3>{{ item.title }}</h3>
            <p>{{ item.con }}</p>
        </div>
    </div>
</template>
<script setup>
const PREFIX = 'carditem'
defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})
</script>
<style lang="less">
.carditem {
    width: 560px;
    display: flex;
    margin-bottom: 116px;

    &-img {
        width: 70px;
        height: 70px;
        margin-right: 30px;
        flex-shrink: 0;
    }

    &-con {
        display: flex;
        flex-direction: column;

        &>h3 {
            height: 34px;
            color: #666666;
            font-size: 28px;
            font-weight: 500;
            line-height: 34px;
            margin-bottom: 16px;
        }

        &>p {
            color: #999999;
            text-align: left;
            font-size: 22px;
            line-height: 25px;
        }
    }
}
</style>